<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听器的使用</title>
</head>
<body>
	<script src="/js/vue.js"></script>
    <div id="app">
		<p>{{value}}</p>
		<button @click="change()">button</button>
		
		<p>{{price}}</p>
		<button @click="changePrice()">button</button>
		<p>比原价贵了{{expensive}}元</p>
		
	</div>
	<script>
		let app = new Vue({
			el:"#app",
			data:{
				value:100,
				price:100,
				rePrice:100,
				expensive:0,
				obj:{
					value:1000
				}
			},
			methods:{
				change(){
					this.Value++
				},
				changePrice(){
					this.price += 10
				},
				changeObj(){
					this.obj.value++
				}
			},
			computed:{
				total(){
					return this.value + this.price
				}
			},
			watch:{
				value(newValue,oldValue){
					console.log("值发生了变化");
					console.log("new:",newValue);
					console.log("old:",oldValue);
				},
				price(newValue,oldValue){
					this.expensive = newValue-this.price
					console.log("oldvalue:",oldValue);
					console.log("thisprice",this.price);
					console.log(this.expensive);
				}
				"obj.value"(){
					console.log(11111111);
				},
				total:function(){
					console.log("");
				},
				name(){
					console.log("");
				},
				list(){
					console.log("");
				}
			}
		})
		
		let a = 10
		let b = a
		a = 11
		console.log(b);
		
		let c = {
			name:"shane"
		}
		let d = c
		c = {age:10}
		console.log(d);
	</script>
	</body>
</html>
